<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>充值</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/main.css" />
		<style>
			.mui-grid-view.mui-grid-9 {
				margin: 0;
				padding: 0;
				border-top: 1px solid #d7d7d7;
				border-left: 1px solid #d7d7d7;
				background-color: #ffffff;
				width: 95%;
				margin: 10px 10px;
			}
			
			.mui-ios .mui-table-view-cell {
				-webkit-transform-style: preserve-3d;
				transform-style: preserve-3d;
				font-size: 15px;
				color: #333333;
			}
			
			.mui-grid-view.mui-grid-9 .mui-media .mui-icon {
				font-size: 20px;
				position: relative;
				color: #FF9E0D;
			}
			
			.mui-grid-view.mui-grid-9 .mui-media {
				color: #823b3b;
				height: 110px;
				text-align: center;
				padding-top: 20px;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 14px;
				line-height: 15px;
				display: block;
				width: 100%;
				height: 15px;
				margin-top: 8px;
				text-overflow: ellipsis;
				color: #999999;
			}
			
			.mui-grid-view.mui-grid-9 .mui-table-view-cell.mui-active {
				background-color: #ffe5c7;
			}
			
			.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
				font-size: 13px;
				line-height: 15px;
				display: block;
				width: 100%;
				height: 15px;
				margin-top: 8px;
				text-overflow: ellipsis;
				color: #999999;
			}
			.mui-content-padded {
    margin: 10px;
    margin-top: 90px;
}
.mui-grid-view.mui-grid-9 .mui-table-view-cell {
    margin: 0;
    vertical-align: top;
    border-right: 1px solid #d7d7d7;
    border-bottom: 1px solid #d7d7d7;
}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">充值</h1>

		</header>
		<div class="mui-content">

			<ul class="mui-table-view">
				<li class="mui-table-view-cell">用户名：张鑫赢</li>

			</ul>
			<ul class="mui-table-view mui-grid-view mui-grid-9">
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="mui-icon">50元</span>
						<div class="mui-media-body">赠3元代金券</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="mui-icon">100元</span>
						<div class="mui-media-body">赠10元代金券</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="mui-icon">300元</span>
						<div class="mui-media-body">赠35元代金券</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon">500元</span>
						<div class="mui-media-body">赠60元代金券</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4 ">
					<a href="#">
						<span class="mui-icon">1000元</span>
						<div class="mui-media-body">赠200元代金券</div>
					</a>
				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-4">
					<a href="#">
						<span class="mui-icon">2000元</span>
						<div class="mui-media-body">赠300元代金券</div>
					</a>
				</li>

			</ul>
			<div class="mui-content-padded dibu">
				<button id='service_add' class="mui-btn mui-btn-block mui-btn-warning">充值</button>
			</div>
		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/xiangyingshi.js"></script>
	<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<script>
	</script>

</html>